<template>
  <div class="sub-info">
    <div class="sub-info-title">
      <span>基本情况</span>
      <el-button type="primary" @click="handleClick(edit)">
        {{edit ? '保存' : '编辑'}}
      </el-button>
    </div>
    <el-form :rules="rules" label-position="left" ref="form" :model="form" label-width="80px" class="resume-form">
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" placeholder="请输入姓名" :disabled="!edit" clearable>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号" prop="idCard">
            <el-input v-model="form.idCard" placeholder="请输入身份证号" :disabled="!edit" clearable>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="出生日期" prop="birthday">
            <el-date-picker :picker-options="pickerOptions" :default-value="timeDefaultShow" clearable
              value-format="yyyy-MM-dd HH:mm:ss" disabled v-model="form.birthday" type="date" placeholder="请选择出生日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别" prop="sex">
            <el-select clearable disabled v-model="form.sex" placeholder="请选择性别">
              <el-option label="男" :value="1"></el-option>
              <el-option label="女" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="民族" prop="nation">
            <el-select clearable :disabled="!edit" v-model="form.nation" placeholder="请选择民族">
              <el-option v-if="selectItems.nationList && selectItems.nationList.length"
                v-for="(v,i) in selectItems.nationList" :label="v.name" :value="v.val" :key="i">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="婚姻状况" prop="maritalStatus">
            <el-select v-model="form.maritalStatus" placeholder="请选择婚姻状况" :disabled="!edit" clearable>
              <el-option v-if="selectItems.maritalStatusList && selectItems.maritalStatusList.length"
                v-for="(v,i) in selectItems.maritalStatusList" :label="v.name" :value="v.val" :key="i">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="政治面貌" prop="politicalStatus">
            <el-select v-model="form.politicalStatus" placeholder="请选择政治面貌" :disabled="!edit" clearable>
              <el-option v-if="selectItems.politicalStatusList && selectItems.politicalStatusList.length"
                v-for="(v,i) in selectItems.politicalStatusList" :label="v.name" :value="v.val" :key="i">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="户籍地" prop="domicilePlace">
            <el-cascader v-if="selectItems.domicilePlaceList && selectItems.domicilePlaceList.length" :props="props"
              v-model="form.domicilePlace" :options="domicilePlaceList" disabled clearable>
            </el-cascader>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="现居住地" prop="currentResidence">
            <el-select v-model="form.currentResidence" placeholder="请选择现居住地" :disabled="!edit" clearable>
              <el-option v-if="selectItems.workPlaceList && selectItems.workPlaceList.length"
                v-for="(v,i) in selectItems.workPlaceList" :label="v.name" :value="v.val" :key="i">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身高" prop="height">
            <el-input placeholder="请输入身高" v-model.number="form.height" :disabled="!edit" clearable>
              <template slot="append">cm</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="体重" prop="weight">
            <el-input placeholder="请输入体重" v-model.number="form.weight" :disabled="!edit" clearable>
              <template slot="append">kg</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="视力状况" prop="vision">
            <el-select v-model="form.vision" placeholder="请选择视力状况" :disabled="!edit" clearable>
              <el-option v-if="selectItems.visionList && selectItems.visionList.length"
                v-for="(v,i) in selectItems.visionList" :label="v.name" :value="v.val" :key="i">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="职称级别" prop="titleLevel">
            <el-select v-model="form.titleLevel" placeholder="请选择职称级别" :disabled="!edit" clearable>
              <el-option v-if="selectItems.titleLevelList && selectItems.titleLevelList.length"
                v-for="(v,i) in selectItems.titleLevelList" :label="v.name" :value="v.val" :key="i">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工作经验" prop="workExp">
            <el-select v-model="form.workExp" placeholder="请选择工作经验" :disabled="!edit" clearable @change="expChange">
              <el-option v-if="selectItems.workExpList && selectItems.workExpList.length"
                v-for="(v,i) in selectItems.workExpList" :label="v.name" :value="v.val" :key="i">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="参加工作时间" prop="workTime">
            <el-date-picker clearable :picker-options="pickerOptions1" value-format="yyyy-MM-dd HH:mm:ss"
              :disabled="!edit || (edit && form.workExp===-1)" v-model="form.workTime" type="date"
              placeholder="请选择参加工作时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学历" prop="education">
            <el-select v-model="form.education" placeholder="请选择学历" :disabled="!edit" clearable>
              <el-option v-if="selectItems.educationList && selectItems.educationList.length"
                v-for="(v,i) in selectItems.educationList" :label="v.name" :value="v.val" :key="i">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="人员类别">
            <el-select v-model="form.peopleType" placeholder="请选择人员类别" :disabled="!edit" clearable>
              <el-option v-for="(v,i) in type" :label="v.name" :value="v.val" :key="i">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="form.education && form.education != 65 && form.education != 66">
          <el-form-item label="所学专业" prop="major">
            <el-input v-model="form.major" placeholder="请输入所学专业" :disabled="!edit" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { analysisIdCard } from '../../../utils/analysisIdCard'
import { getDomicilePlace } from '../../../api/resumeEdit'
import { getPersonType } from '../../../api/registerInfo.js';
export default {
  components: {

  },
  props: ['selectItems', 'id', 'basicForm'],
  data () {
    // let idCardPass = (rule, value, callback) => {
    //   const idCardReg = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)/;
    //   if (value && !idCardReg.test(value)) {
    //     callback(new Error("身份证号码格式不正确"));
    //   } else {
    //     if (value) {
    //       //                       let idNumber = this.form.idCard.substr(6, 8);
    //       //                       let idNumberSub = this.form.idCard.substring(16,17)
    //       //                       if(!this.form.birthday || (this.form.birthday && this.form.birthday != idNumber)) {
    //       //                           this.form.birthday = this.$day(idNumber).format(
    //       //                               "YYYY-MM-DD HH:mm:ss"
    //       //                           );
    //       //                       }
    //       //                       if(!this.form.sex || (this.form.sex == 1 && idNumberSub % 2 != 1 ) || (this.form.sex == 2 &&  idNumberSub % 2 == 1 )) {
    //       //                           if (idNumberSub % 2 === 1) {
    //       //                               this.$set(this.form,'sex',1);
    //       //                           } else {
    //       //                               this.$set(this.form,'sex',2);
    //       //                           }
    //       //                       }

    //     }
    //     callback();
    //   }
    // };
    let numberPass = (rule, value, callback) => {
      let reg = /^[0-9]+.?[0-9]*$/;
      if (value < 0) {
        callback(new Error("不能为负数"));
      } else if (value && !reg.test(value)) {
        callback(new Error("请输入数字"));
      } else if (!value) {
        callback();
      } else if (value > 500) {
        callback(new Error("不能多于500"));
      } else {
        callback();
      }
    }

    return {
      domicilePlaceList: [],
      timeDefaultShow: '',
      pickerOptions: {},
      pickerOptions1: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        }
      },
      props: {
        value: "code",
        label: "name",
        children: "childVo"
      },
      edit: false,
      options: [],
      type: [],
      form: {
        name: "",
        idCard: "",
        birthday: "",
        sex: "",
        nation: "",
        maritalStatus: "",
        politicalStatus: "",
        domicilePlace: [],
        currentResidence: "",
        height: "",
        weight: "",
        vision: "",
        titleLevel: "",
        workExp: "",
        workTime: "",
        major: "",
        education: "",
        peopleType: null
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { max: 20, message: '请输入20字以内', trigger: 'change' }
        ],
        idCard: [
          { required: true, message: '请输入身份证号码', trigger: 'blur' },
          { pattern: /^[1-9]\d{5}(19|20)\d{2}[01]\d[0123]\d\d{3}[xX\d]$/, message: '身份证号输入错误' }
        ],
        weight: [
          { validator: numberPass, trigger: 'change' }
        ],
        height: [
          { validator: numberPass, trigger: 'change' }
        ],
        workExp: [
          { required: true, message: '请选择工作经验', trigger: 'change' }
        ],
        currentResidence: [{ required: true, message: '请选择现居住地', trigger: 'change' }],
        workTime: [],
        education: [
          { required: true, message: '请选择学历', trigger: 'change' }
        ]
      }
    };
  },
  watch: {
    "form.idCard": function (val) {
      if (val) {
        if (/^[1-9]\d{5}(19|20)\d{2}[01]\d[0123]\d\d{3}[xX\d]$/.test(val)) {
          let obj = analysisIdCard(val);
          this.form.sex = obj.sex;
          this.form.birthday = obj.birthday;
          this.form.domicilePlace = obj.domicilePlace;
        }
      } else {
        this.form.sex = ''
        this.form.birthday = '';
        this.form.domicilePlace = '';
      }
    }
  },
  methods: {
    expChange (val) {
      if (val != -1) {
        this.rules.workTime = [{ required: true, message: '请选择参加工作时间', trigger: 'change' }]
        this.form.workTime = '';
      } else if (val == -1) {
        this.rules.workTime = [{ message: '', trigger: 'change' }]
        if (this.form.workTime === '') {
          this.form.workTime = null
        } else {
          this.form.workTime = ''
        }
      }
    },
    handleClick (edit) {
      if (edit) {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            let temp = JSON.parse(JSON.stringify(this.form));
            temp.domicilePlace = JSON.stringify(this.form.domicilePlace);
            this.id && this.id != -1 ? temp.id = this.id : temp.id = '';
            this.$emit('updateResume', temp, 1)
            this.edit = !this.edit;
          } else {
            return false;
          }
        });
      } else {
        this.edit = !this.edit;
      }

    },
    initDate () {
      let date = new Date();
      let year = date.getFullYear() - 16;
      let month = date.getMonth() + 1;
      let day = date.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      let startDate = year + "-" + month + "-" + day;
      this.pickerOptions.disabledDate = (time) => {
        return time.getTime() > new Date(startDate).getTime()
      }

      this.timeDefaultShow = new Date();
      this.timeDefaultShow.setYear(new Date().getFullYear() - 16);
    }
  },
  created () {
    getPersonType().then(res => {
      if (res.success) {
        this.type = res.data.people_type || []
      }
    })
    getDomicilePlace().then(data => {
      if (data.success) {
        this.domicilePlaceList = data.data;
      } else {
        this.$message.error(`${data.msg}`)
      }
    })
    this.initDate();
    if (this.id == -1 || !this.id) {
      this.edit = true;
    } else {
      this.edit = false;
    }

    if (this.basicForm) {
      for (let a in this.form) {
        for (let b in this.basicForm) {
          if (a == b && this.basicForm[b]) {
            if (a == 'domicilePlace') {
              this.form.domicilePlace = JSON.parse(this.basicForm[b]);
            } else {
              this.form[a] = this.basicForm[b];
            }
          }
        }
      }
    }
    console.log(this.basicForm);
    console.log(this.form);
    if (this.form.workExp != -1) {
      this.rules.workTime = [{ required: true, message: '请选择参加工作时间', trigger: 'change' }]
    } else if (this.form.workExp == -1) {
      this.rules.workTime = [{ message: '', trigger: 'change' }]
      this.form.workTime = ''
    }
  }
}
</script>
<style lang="css" scoped>
.sub-info {
    /*height: 500px;*/
    background: #ffffff;
}
.sub-info-title {
    display: flex;
    justify-content: space-between;
    padding: 0 44px;
    background: #ffffff;
    height: 62px;
    align-items: center;
}
.sub-info-title span:after {
    width: 28px;
    height: 2px;
    background: #1893fc;
    content: '';
    display: block;
    margin-top: 3px;
}
.sub-info-title .el-button {
    padding: 0;
    width: 94px;
    height: 24px;
    line-height: 24px;
    box-sizing: border-box;
    background: #1893fc;
}
.resume-form {
    padding: 0 58px;
}
.el-row > .el-col-12:nth-child(2) {
    display: flex;
    justify-content: flex-end;
}
.el-cascader__tags {
    top: 67%;
}
</style>
